<template>
  <div style="display: inline-block;">
    <el-button type="primary" icon="el-icon-edit" circle title="编辑" @click="dialogTableVisible = true"/>
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="修改" @close="close">
      <el-form ref="row_data" label-position="left" label-width="110px" style="width: 400px; margin-left:50px;">
        <el-form-item label="商ID" prop="configuration_EN">
          <el-input v-model="row_data.merchantID" placeholder="商家ID" disabled/>
        </el-form-item>
        <el-form-item label="配置名称(英文)" prop="configuration_EN">
          <el-input v-model="row_data.key" placeholder="配置名称(英文)" disabled/>
        </el-form-item>
        <el-form-item label="中文注释" prop="configuration_CH">
          <el-input v-model="key_name" placeholder="配置名称（中文注释）"/>
        </el-form-item>
        <el-form-item label="配置内容" prop="configuration_content">
          <el-input v-model="content" placeholder="配置内容" type="textarea" autosize/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">编辑</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import store from '@/store'
import { editMerchant } from '@/api/merchant/merchant_config'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Object,
      // 对象或数组默认  值必须从一个工厂函数获取
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      key_name: '',
      content: ''
    }
  },
  created: function() {
    console.log(this.row_data)
  },
  methods: {
    submitForm() {
      const id = this.row_data.id
      const merchantID = this.row_data.merchantID
      const key = this.row_data.key
      const key_name = this.key_name
      const content = this.content
      if (key_name === '') {
        this.$message({
          type: 'info',
          message: '中文注释不得为空!'
        })
        return false
      }
      if (content === '') {
        this.$message({
          type: 'info',
          message: '配置内容不得为空!'
        })
        return false
      }
      editMerchant(store.getters.token, { id: id, merchantID: merchantID, key: key, key_name: key_name, content: content }).then(res => {
        if (res.data.status === true) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.close()
          this.$emit('getLists')
        } else {
          this.$message({
            type: 'info',
            message: res.data.msg
          })
        }
      })
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
